<template>
    <div style="width: 500px;background-color: rgba(182,182,182,0.18)" >
        <div style="margin-left: 0;text-align: left">
            <div v-if="!nameChange" >
                <span>姓名: <span>{{user.name}}</span></span> <el-button type="text" style="margin-left: 350px" @click="openchange(1)">编辑</el-button>
            </div>
            <div v-if="nameChange">
            <span>姓名：<el-input v-model="user.name" style="width: 100px;"></el-input></span>
                <el-button type="text" style="margin-left: 280px" @click="closechange(1)">取消</el-button>
                <div style="margin: 20px"><el-button style="margin-left: 300px" @click="changeName">提交</el-button></div>
            </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 0;text-align: left;height: 40px">
            <div >
                <span>职务: <span>{{user.rank}}</span></span>
            </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 0;text-align: left;height: 40px">
            <div>
                <span>账号: <span>{{user.loginnum}}</span></span>
            </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 0;text-align: left">
            <div v-if="!passChange" >
                <span>密码: <span>******</span></span><el-button type="text" style="margin-left: 350px" @click="openchange(2)">编辑</el-button>
            </div>
            <div v-if="passChange">
                <span>当前密码：<el-input v-model="passwordchange" style="width: 100px;" show-password></el-input></span>
                <el-button type="text" style="margin-left: 280px" @click="closechange(2)">取消</el-button>
                <el-form  :model="passForm" :rules="passrule" ref="passForm">
                    <el-form-item label="新密码" prop="newpass"><el-input show-password v-model="passForm.newpass"></el-input></el-form-item>
                    <el-form-item label="确认密码" prop="confirm"><el-input show-password v-model="passForm.confirm"></el-input></el-form-item>
                </el-form>
                <el-button style="margin-left: 200px" @click="changePassWord">提交</el-button>
            </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 0;text-align: left">
            <div v-if="!phoneChange" >
                <span>手机: <span>{{newItem(user.phonenum,3)}}</span></span> <el-button type="text" style="margin-left: 290px" @click="openchange(3)">编辑</el-button>
            </div>
            <div v-if="phoneChange">
                <span>手机号码：<el-input v-model="phone" style="width: 150px;"></el-input></span>

                <el-button type="text" style="margin-left: 160px" @click="changePhone">确定</el-button>
                <el-button type="text"  @click="closechange(3)">取消</el-button>
            </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 0;text-align: left;height: 40px">
            <div>
                <span>身份证: <span>{{newItem(user.cardnum,3)}}</span></span>
            </div>
        </div>
        <el-divider></el-divider>
    </div>
</template>

<script>
    export default {
        name: "Center",
        data(){
          return {
              user:sessionStorage.getItem('user')?JSON.parse(sessionStorage.getItem('user')):[],
              nameChange:false,
              passChange:false,
              phoneChange:false,
              phone:'',
              passwordchange:'',
              passForm:{
                newpass:'',
                confirm:''
              },
              passrule:{
                  newpass:[{
                      require:true,
                      trigger:'blur',
                      message:'请输入密码',
                      // validator:confirmV
                  }],
                  confirm:[{
                      require: true,
                      trigger: 'blur',
                      message:'请输入密码',
                      // validator:newpassV
                  }],

              }
          }
        },
        methods: {
            newItem(item,num){
                return `${item.substring(0,num)}****${item.substring(item.length-4)}`;
            },
            openchange(chang){
                if (chang ===1){
                    this.nameChange=true;
                    this.phoneChange=false;
                    this.passChange=false;
                }else if (chang ===2){
                    this.nameChange=false;
                    this.phoneChange=false;
                    this.passChange=true;
                }else if (chang ===3){
                    this.passChange=false;
                    this.nameChange=false;
                    this.phoneChange=true;
                }
            },
            closechange(chang){
                if (chang === 1){
                    this.nameChange=false;
                }else if (chang ===2){
                    this.passChange=false;
                }else if (chang ===3){
                    this.phoneChange=false;
                }
            },
            changeName(){
                var params = new URLSearchParams;
                params.append('name',this.user.name);
                params.append('id',this.user.id);
                this.$axios.post('staff/name',params).then(req=>{
                    console.log(req.data);
                    if (req.data !==null){
                        this.user.name = req.data.name;
                        this.nameChange= false;
                        this.$message.success("修改成功！")
                    }else {
                        this.$message.error("修改失败！");
                    }
                });
            },
            changePassWord(){
                if (this.passwordchange == this.user.loginpass){
                    if (this.passForm.newpass == this.passForm.confirm){
                        var params = new URLSearchParams;
                        params.append('pass',this.passForm.confirm);
                        params.append('id',this.user.id);
                        this.$axios.post('staff/pass',params).then(req=>{
                            if (req.data !== null){
                                this.user.loginpass = req.data.loginpass;
                                this.passChange= false;
                                this.$message.success("修改成功")
                            }else {
                                this.$message.error("修改失败")
                            }
                        });
                    }else {
                        this.$message.error("两次密码不相同")
                    }
                }else {
                    this.$message.error("密码不正确");
                }
            },
            changePhone(){
                var params = new URLSearchParams;
                params.append('phone',this.phone);
                params.append('id',this.user.id);
                this.$axios.post('staff/phone',params).then(req=>{
                    if (req.data !==null){
                        this.user.phonenum = req.data.phonenum;
                        this.phoneChange= false;
                        this.$message.success("修改成功！")
                    }else {
                        this.$message.error("修改失败！");
                    }
                });
            }

        }
    }
</script>

<style scoped>

</style>